<template>
	<view class="card">
		<view v-if="articleList.length" class="card-list">
			<view v-for="(item, index) in articleList" :key="index" class="card-item" @click="() => toPage(item.articleId)">
				<view class="card-img" :style="{'background-image': `url(${item.cover})`}"></view>
				<view class="card-info">
					<view class="card-info-title">{{item.title}}</view>
					<view class="card-info-text">{{item.guide}}</view>
				</view>
			</view>
		</view>
        <u-empty v-else text="暂无文章" mode="news" :margin-top="200"></u-empty>
	</view>
</template>

<script>
    import Vue from 'vue';
	import { getArticleListAPI } from '../../api/arc'

    const app = getApp()

	export default Vue.extend({
		data() {
			return {
				articleList: [],
                itemId: ''
			}
		},
		onLoad(options) {
            this.itemId = options.itemId
            uni.setNavigationBarTitle({
            　　title: app.globalData.articleItemMap.get(this.itemId + '')
            })
            getArticleListAPI({
				itemId: this.itemId
			}).then(res => {
				console.log(res.articlesList)
				this.articleList = res.articlesList
			})
		},
		methods: {
			toPage(id){
				let route = this.$u.route
				route('pages/article/article', {
					articleId: id
				})
			}
		}
	});
</script>

<style lang="scss" scoped>
	.card{
		width: 100%;
		padding: 0 20rpx;
		.card-list{
			margin-top: 20rpx;
			.card-item{
				display: flex;
				margin-bottom: 30rpx;
				background-color: #fff;
				padding: 20rpx;
				align-items: center;
				box-shadow: 1px 1px 3px 1px #ccc;
				border-radius: 15rpx;
				.card-img{
					width: 200rpx;
					height: 160rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					flex: none;
				}
				.card-info{
					flex: auto;
					padding: 0 15rpx;
					display: flex;
					height: 160rpx;
					flex-direction: column;
					.card-info-title{
						width: 55vw;
						box-sizing: border-box;
						height: 60rpx;
						font-size: 34rpx;
						line-height: 60rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						font-weight: bold;
					}
					.card-info-text{
						width: 100%;
						box-sizing: border-box;
						height: 100rpx;
						line-height: 40rpx;
						margin: 10rpx 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.card-info-bottom{
						display: flex;
						justify-content: space-between;
						margin-top: 40rpx;
						.card-info-bottom-left{
							width: 150rpx;
							height: 50rpx;
							position: relative;
							.card-info-bottom-left-text{
								position: absolute;
								top: 0;
								width: 100%;
								text-align: center;
								line-height: 50rpx;
								color: #fff;
							}
							image{
								width: 150rpx;
								height: 50rpx;
							}
						}
						.card-info-bottom-right{
							font-size: 36rpx;
							line-height: 50rpx;
							color: #ff4d4f
						}
					}
				}
			}
		}
	}
</style>
